<html>
<head>

<meta name="viewport" content="user-scalable=no, width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" href="/robot/media/apple-touch-icon.png" />

<script type="text/javascript" src="/robot/media/jquery-1.7.1.js"></script>
<script type="text/javascript" src="/robot/media/jQueryRotate.2.1.js"></script>
<script type="text/javascript">

// iPad
function init() {
  interval = 200;  // In milliseconds.
  this.timerID = setInterval(function () { updatePose(); }, interval);
  translate_pioneer(0.0, 0.0); 
  rotate_pioneer(Math.PI / 2 + .5); 
  //setMission(29.5, -10.5, 0.0);
}

function translate_pioneer(px, py) {
  pioneer_radius = 10.5;
  w = 65.84;
  h = 27.32;
  h_prime = 1004.0;  
  r = h_prime / h;
  document.getElementById("pioneer").style.left = 
    (py + h / 2) * r - pioneer_radius;
  document.getElementById("pioneer").style.top = 
    (px + w / 2) * r - pioneer_radius;
}

function rotate_pioneer(pa) {
  if (pa < 0) {
    pa = 2 * Math.PI + pa;
  } 
  pa += Math.PI / 2;
  document.getElementById("pioneer").style.WebkitTransform = "rotate(-" + pa + "rad)";
}

function blockElasticMove(event) {
  // Tell Safari not to move the window.
  //event.preventDefault();
}

// Ajax
function updatePose() {
  var xmlhttp;
  if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  } else {// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } 
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      xmlDoc = xmlhttp.responseXML;
      px = parseFloat(xmlDoc.getElementsByTagName("px")[0].textContent);
      py = parseFloat(xmlDoc.getElementsByTagName("py")[0].textContent);
      pa = parseFloat(xmlDoc.getElementsByTagName("pa")[0].textContent);
      // document.getElementById("myDiv").innerHTML = px + py + pa; // TEST
      translate_pioneer(px, py);
      rotate_pioneer(pa);
    }
  }
  xmlhttp.open("GET", "/robot/pose/", true);
  xmlhttp.send();
}
function setMission(px, py) {
  pa = 0;
  var xmlhttp;
  if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  } else {// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } 
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("myDiv").innerHTML = xmlhttp.responseText; // TEST
    }
  }
  // TODO get pose from touch.
  xmlhttp.open("POST", "/robot/set_mission/", true);
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlhttp.send("px=" + px.toFixed(2) + "&py=" + py.toFixed(2) + "&pa=" + pa.toFixed(2));
}
</script>
</head>
<body onload="init();" ontouchmove="blockElasticMove(event);">
<div id="myDiv"><h2></h2></div>
<br/>
<div style="position: absolute; left: 0; top: 0;">
  <img width="1004px" style="z-index: 0; position: absolute; top: 0; left: 0;" src="/robot/media/bloco_b.bmp" />
  <img id="pioneer" width="21" style="z-index: 2; position: absolute; top: 30; left: 70; -webkit-transform: rotate(45deg);" src="/robot/media/pioneer-top.png" />

  <!-- Missions to corridors. -->
  <button name="m0" style="z-index: 1; height: 70px; width: 70px; position: absolute; top: 114.57; left: 819.80;" 
    onclick="setMission(-28.85, 9.60);">0</button>
  <button name="m5" style="z-index: 1; height: 70px; width: 70px; position: absolute; top: 1075.57; left: 819.80;" 
    onclick="setMission(-2.70, 9.60);">5</button>
  <button name="m11" style="z-index: 1; height: 70px; width: 70px; position: absolute; top: 2244.21; left: 819.80;" 
    onclick="setMission(29.10, 9.60);">11</button>
  <button name="m16" style="z-index: 1; height: 70px; width: 70px; position: absolute; top: 2244.21; left: 84.80;" 
    onclick="setMission(29.10, -10.40);">16</button>
  <button name="m22" style="z-index: 1; height: 70px; width: 70px; position: absolute; top: 1075.57; left: 84.80;" 
    onclick="setMission(-2.70, -10.40);">22</button>
  <button name="m27" style="z-index: 1; height: 70px; width: 70px; position: absolute; top: 114.57; left: 84.80;" 
    onclick="setMission(-28.85, -10.40);">27</button>

  <!-- Missions to rooms. -->
  <button name="m32" style="z-index: 1; height: 70px; width: 70px; position: absolute; top: 274.43; left: 650.78;" 
    onclick="setMission(-24.50, 5.00);">32</button>
  <button name="m33" style="z-index: 1; height: 70px; width: 70px; position: absolute; top: 671.33; left: 650.78;" 
    onclick="setMission(-13.70, 5.00);">33</button>
  <button name="m34" style="z-index: 1; height: 70px; width: 70px; position: absolute; top: 1075.57; left: 650.78;" 
    onclick="setMission(-2.70, 5.00);">34</button>
  <button name="m35" style="z-index: 1; height: 70px; width: 70px; position: absolute; top: 1468.80; left: 650.78;" 
    onclick="setMission(8.00, 5.00);">35</button>
  <button name="m36" style="z-index: 1; height: 70px; width: 70px; position: absolute; top: 1873.04; left: 650.78;"
    onclick="setMission(19.00, 5.00);">36</button>
  <button name="m37" style="z-index: 1; height: 70px; width: 70px; position: absolute; top: 1873.04; left: 246.50;" 
    onclick="setMission(19.00, -6.00);">37</button>
  <button name="m38" style="z-index: 1; height: 70px; width: 70px; position: absolute; top: 1468.80; left: 246.50;"
    onclick="setMission(8.00, -6.00);">38</button>
  <button name="m39" style="z-index: 1; height: 70px; width: 70px; position: absolute; top: 1075.57; left: 246.50;" 
    onclick="setMission(-2.70, -6.00);">39</button>
  <button name="m40" style="z-index: 1; height: 70px; width: 70px; position: absolute; top: 671.33; left: 246.50;" 
    onclick="setMission(-13.70, -6.00);">40</button>
  <button name="m41" style="z-index: 1; height: 70px; width: 70px; position: absolute; top: 274.43; left: 246.50;" 
    onclick="setMission(-24.50, -6.00);">41</button>
  
</div>
</body>
</html>
